@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 255, 255, 255;
  --background-rgb: 17, 24, 39;
}

body {
  color: rgb(var(--foreground-rgb));
  background: rgb(var(--background-rgb));
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgb(31, 41, 55);
}

::-webkit-scrollbar-thumb {
  background: rgb(79, 70, 229);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(99, 102, 241);
}

/* Loading 动画 */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.animate-ripple {
  animation: ripple 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* 平滑过渡效果 */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* 焦点样式 */
.focus-visible:focus {
  outline: 2px solid rgb(99, 102, 241);
  outline-offset: 2px;
}

/* 占位符样式 */
::placeholder {
  color: rgb(156, 163, 175);
  opacity: 1;
}
